import React, { useState, useCallback, useEffect } from 'react';
import { getLsCarPassageOverviewGuard, getLsCarPassageGetGlobalGuard } from '../../api'
import * as echarts from 'echarts';
import ImportAntExportSetModule from './components/ImportAntExportSetModule'
import {
    ImportAntExportEchartsAll,
    ImportAntExportEchartsSet,
    ImportAntExportEchartsSetSuccess,
    ImportAntExportEchartsSetError,
    ImportAntExportEchartsSetText
} from './style'
import { Button, message, PageHeader } from 'antd'


const ImportAntExportEcharts = () => {
    const [eChartsDataSet, setEChartsDataSet] = useState(undefined)
    const [importAndExportSetModuleShow, setImportAndExportSetModuleShow] = useState(false)
    const eChartsFun = useCallback(
        () => {
            ; (async () => {
                const { code, msg, data } = await getLsCarPassageOverviewGuard()
                if (code === '20000') {
                    let xData = [];
                    let yData = [];
                    data.forEach(element => {
                        xData.push(element.date)
                        yData.push(element.len)
                    });
                    var chartDom = document.getElementById('main');
                    var myChart = echarts.init(chartDom);
                    var option;
                    option = {
                        tooltip: {
                            trigger: 'axis'
                        },
                        xAxis: {
                            type: 'category',
                            name: '日期',
                            data: xData
                        },
                        yAxis: {
                            name: '数量',
                            type: 'value'
                        },
                        series: [{
                            name: '进出数量',
                            data: yData,
                            type: 'line'
                        }]
                    };

                    option && myChart.setOption(option);
                } else {
                    message.error(msg)
                }
            })()

        },
        [],
    )
    const setFun = useCallback(
        () => {
            ; (async () => {
                const { code, msg, data } = await getLsCarPassageGetGlobalGuard()
                if (code === '20000') {
                    setEChartsDataSet(data)
                } else {
                    message.error(msg)
                }
            })()
        },
        [],
    )
    useEffect(() => {
        eChartsFun()
        setFun()
    }, [eChartsFun, setFun])
    const handleClickSet = () => {
        setImportAndExportSetModuleShow(true)
    }
    const handleSetDate = () => {
        if (eChartsDataSet) {
            if (eChartsDataSet.startTime === '00:00:00' && eChartsDataSet.endTime === '00:00:00') {
                return <ImportAntExportEchartsSetError>
                    禁止通行
                </ImportAntExportEchartsSetError>
            } else if (eChartsDataSet.startTime === '00:00:01' && eChartsDataSet.endTime === '23:59:59') {
                return <ImportAntExportEchartsSetSuccess>
                    全天通行
                </ImportAntExportEchartsSetSuccess>
            } else {
                return <ImportAntExportEchartsSetText>
                    {eChartsDataSet.startTime}~{eChartsDataSet.endTime}
                </ImportAntExportEchartsSetText>
            }
        }

    }
    return <ImportAntExportEchartsAll>
        <PageHeader
            className="site-page-header"
            title="进出口统计概览"
        />
        <ImportAntExportEchartsSet >
            中午临时通行时间 ： {
                handleSetDate()
            }
            <Button
                type='primary'
                onClick={() => handleClickSet()}
            > 设置</Button>
        </ImportAntExportEchartsSet>
        <div id='main' style={{ width: '880px', height: '500px' }}></div>
        <ImportAntExportSetModule
            importAndExportSetModuleShow={importAndExportSetModuleShow}
            setImportAndExportSetModuleShow={setImportAndExportSetModuleShow}
            setFun={setFun}
        />
    </ImportAntExportEchartsAll>
}

export default ImportAntExportEcharts